<template>
    <el-card class="workflow-sidebar">
        <template #header>
            <div class="sidebar-header">
                <span>📋 我的工作流</span>
                <el-badge :value="activeWorkflows" type="success" />
            </div>
        </template>

        <div class="workflow-list">
            <div v-for="workflow in workflows" :key="workflow.id" class="workflow-item"
                :class="{ active: selectedWorkflow?.id === workflow.id }" @click="onSelectWorkflow(workflow)">
                <div class="workflow-info">
                    <div class="workflow-name">{{ workflow.name }}</div>
                    <div class="workflow-desc">{{ workflow.description }}</div>
                    <div class="workflow-meta">
                        <el-tag :type="getStatusType(workflow.status)" size="small">
                            {{ getStatusText(workflow.status) }}
                        </el-tag>
                        <span class="workflow-runs">{{ workflow.totalRuns }} 次运行</span>
                    </div>
                </div>
                <div class="workflow-actions">
                    <el-switch :model-value="workflow.enabled" @change="onToggleWorkflow(workflow)" size="small" />
                </div>
            </div>
        </div>
    </el-card>
</template>

<script>
export default {
    name: 'WorkflowList',
    props: {
        workflows: {
            type: Array,
            required: true,
        },
        selectedWorkflow: {
            type: Object,
            default: null,
        },
        activeWorkflows: {
            type: Number,
            required: true,
        },
    },
    emits: ['select-workflow', 'toggle-workflow'],
    setup(props, { emit }) {
        const onSelectWorkflow = (workflow) => {
            emit('select-workflow', workflow);
        };

        const onToggleWorkflow = (workflow) => {
            // We emit the workflow and the new value
            emit('toggle-workflow', workflow);
        };

        const getStatusType = (status) => {
            const types = {
                active: 'success',
                inactive: 'info',
                error: 'danger'
            };
            return types[status] || 'info';
        };

        const getStatusText = (status) => {
            const texts = {
                active: '运行中',
                inactive: '已停止',
                error: '错误'
            };
            return texts[status] || status;
        };

        return {
            onSelectWorkflow,
            onToggleWorkflow,
            getStatusType,
            getStatusText,
        };
    },
};
</script>

<style scoped>
.workflow-sidebar {
    height: 600px;
}

.sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.workflow-list {
    max-height: 500px;
    overflow-y: auto;
}

.workflow-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    border: 1px solid #f0f0f0;
    border-radius: 8px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: all 0.3s;
}

.workflow-item:hover {
    background-color: #f8f9fa;
    border-color: #409eff;
}

.workflow-item.active {
    background-color: #e8f4ff;
    border-color: #409eff;
}

.workflow-info {
    flex: 1;
}

.workflow-name {
    font-weight: 600;
    color: #333;
    margin-bottom: 4px;
}

.workflow-desc {
    font-size: 12px;
    color: #666;
    margin-bottom: 8px;
}

.workflow-meta {
    display: flex;
    align-items: center;
    gap: 8px;
}

.workflow-runs {
    font-size: 12px;
    color: #999;
}
</style>
